<template>
  <div class="body">
    <div class="counter-warp">
      <view class="forget_pwd">
        <view class="father_accounts">
          <input class="accounts" v-model="regist_account" maxlength="11" placeholder="手机号" />
          <image class="acc_icon" :mode="scaleToFill" src="/static/img/ic_login_icon_yhm.png"></image>
        </view>

        <view class="father_accounts marginmini">
          <input class="accounts_verification" v-model="regist_verification" maxlength="6" placeholder="验证码" />
          <image class="acc_icon" :mode="aspectFit" src="/static/img/ic_login_icon_passwords.png"></image>
          <button :class="canSend ? 'btn_verification_can_send' : 'btn_verification'" :disabled="!canSend" @click="toSendMsg">{{sendText}}</button>
        </view>
        <view :class="canNext? 'btnCanNext' : 'btnNext'"  @click="toNext">下一步</view>
        <view>
        </view>
      </view>
    </div>
  </div>
</template>

<script>
// Use Vuex
import api from '@/utils/api'
export default {
  data () {
    return {
      canNext: false,
      canSend: false,
      regist_account: '',
      regist_verification: '',
      time: 60,
      sendText: '获取验证码'
    }
  },
  watch: {
    regist_account (curVal, oldVal) {
      console.log(curVal, oldVal)
      if (curVal !== '' && this.regist_verification.length === 6) {
        this.canNext = true
      } else {
        this.canNext = false
      }
      if (curVal !== '') {
        this.canSend = true
      } else {
        this.canSend = false
      }
    },
    regist_verification (curVal, oldVal) {
      console.log(curVal, oldVal)
      if (curVal.length === 6 && this.regist_account !== '') {
        this.canNext = true
      } else {
        this.canNext = false
      }
    }
  },
  methods: {
    toNext () {
      if (this.canNext) {
        // this.$router.push({ path: '/pages/accounts/forgetpasswordfinish/main', query: { cellphone: this.regist_account } })
        const opverifysmscode = api.opverifysmscode(this.regist_account, this.regist_verification, 4)
        opverifysmscode.then(d => {
          if (d.code === 200) {
            this.$router.push({ path: '/pages/accounts/forgetpasswordfinish/main', query: { cellphone: this.regist_account } })
          }
        })
        .catch((e) => {
          console.log(e)
        })
      }
    },
    toSendMsg () {
      if (!/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(this.regist_account) || this.regist_account.length < 11) {
        wx.showToast({
          title: '手机号有误',
          icon: 'none'
        })
      } else {
        this.toGetCode(this.regist_account, 4, '') // 4重置密码
      }
    },
    toGetCode (cellphone, type, code) {
      var _this = this
      const opsentmsgcode = api.opsentmsgcode(cellphone, type, code)
      opsentmsgcode.then(d => {
        if (d.code === 200) {
          wx.showToast({
            title: '发送成功',
            icon: 'success'
          })
          _this.canSend = false
          _this.time = 60
          let interval = setInterval(function () {
            if ((_this.time--) <= 0) {
              clearInterval(interval)
              _this.canSend = true
              _this.sendText = '获取验证码'
            } else {
              _this.canSend = false
              _this.sendText = _this.time + 'S'
            }
          }, 1000)
        }
      })
      .catch((e) => {
        console.log(e)
      })
    }
  }
}

</script>
<style>
@import './forgetpwd.css';
</style>
